import React from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import {
	WeaRightMenu,
	WeaLeftRightLayout
} from 'ecCom';
import Title from './Title';
import Tab from './Tab';
import OrgTree from './OrgTree';
import Dialog from './Dialog';
import Table from './Table';
import '../../style/addressBook.less'

@inject('addressBook')
@observer
export default class AddressBook extends React.Component {
	constructor(props) {
		super(props);
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init();
		}
	}

	componentDidMount() {
		this.init();
	}

	init = () => {
		const {
			addressBook: store
		} = this.props, {
			getSubcompanyList,
			getSearchCondition,
			getSearchList,
			getRightMenu,
		} = store;
		const callback = () => {
			const callback = () => {
				getSearchList();
			}
			getSearchCondition(callback);
		}
		getSubcompanyList(callback);
		getRightMenu();
	}

	render() {
		const {
			addressBook: store
		} = this.props, {
			triggerRefresh,
			dropMenuDatas,
		} = store;

		return (
			<div className='addressBook'>
				<WeaRightMenu datas={dropMenuDatas} >
					<Title />
					<div className='conditions'>
						<Tab store={store} />	
						<div style={{height:'100%' }} >
							<WeaLeftRightLayout
								showBtn={false}
						      	leftCom={<OrgTree store={store} triggerRefresh={triggerRefresh}/>}
						    >
						      <div className='table'>
						      	<Table store={store}/>
						      </div>
						    </WeaLeftRightLayout>
						</div>
					</div>
					</WeaRightMenu>
				<Dialog store={store}/>
			</div>
		);
	}
}